<template>
	<header class="header">
		<div class="logo">
			<img src="../assets/img/vipabc@3x.png" />
		</div>
		<div v-bind:style="header.cnStyle">
			{{header.cnTitle}}
		</div>
		<div v-bind:style="header.enStyle">
			{{header.enTitle}}
		</div>
	</header>
</template>

<script>
	export default {
		props: ['header'],
		data: function() {
			return {
				counter: 0
			}
		}
	}
</script>

<style>
	.header {
		color: #000000;
		text-align: center;
    margin: 20px auto 0;
    max-width: 768px
	}

	.logo img {
		width: 100%;
	}
	@media only screen and (max-width: 768px) {
		.logo {
		padding: 0 30% 0 30%;
		}
	}
/*
	@media only screen and (min-width:768px) and (max-width: 1024px) {
		.logo {
			padding: 0 35% 0 35%;
		}
	}

	@media only screen and (min-width: 1024px) and (max-width:1366px) {
		.logo {
			padding: 0 41% 0 41%;
		}
	}

	@media only screen and (min-width: 1366px) {
		.logo {
			max-width: 150px;
			margin: 0 auto;
		}
	} */
</style>
